<template>
	<view class="content">
		<view class="lunbo">

		</view>
		<view class="fenlei">
			<view class="fenleip">
				 <!-- v-for="item in 5" :key="item.id" -->
				<img src="/static/imgtest/黑.png" alt="分类图片" />
				<p>商城</p>
			</view>
			<view class="fenleip">
				<img src="/static/imgtest/黑.png" alt="分类图片" />
				<p>关于我们</p>
			</view>
			<view class="fenleip">
				<img src="/static/imgtest/黑.png" alt="分类图片" />
				<p>图集</p>
			</view>
			<view class="fenleip">
				<img src="/static/imgtest/黑.png" alt="分类图片" />
				<p>视频</p>
			</view>
		</view>
		<view class="shangpins">
			<view class="shangpin" v-for="item in result" :key="item.id" @click="goDetails(item.id)">
				<img class="shangpinimg" :src="item.images" alt="商品图片" />
				<view class="shangpinmes">
					<p class="shangpinp">{{item.title}}</p>
					<view class="shangjia">
						<img class="shangjiaimg" src="/static/imgtest/tx.png" alt="商家头像" />
						<p class="shangjianame">商家名字</p>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue';

	const result = ref([])

	// 示例：向一个 RESTful API 接口请求数据
	uni.request({
		url: 'http://localhost:8081/blog/getBlogList', // 接口地址
		method: 'GET', // 请求方法，可以是 GET、POST 等
		params: {
			pageNum: 1,
			pageSize: 4,
		},
		success: function(res) {
			result.value = res.data.data
			// console.log(result);
		}
	})

	function goDetails(id) {
		uni.navigateTo({
			url: `../../pages/news/newsDetails/newsDetails?id=${id}`
		});
	}
</script>

<style lang="scss">
	.lunbo {
		width: 100%;
		height: 12rem;
		background: orange;
	}

	.fenlei {
		width: 100%;
		height: 7rem;
		display: flex;
		background: rgb(250, 250, 250);

		.fenleip {
			width: 5rem;
			height: 6rem;
			border-radius: 15%;
			background: rgb(255, 120, 60);
			margin: auto;
			text-align: center;

			img {
				padding: 0.125rem;
				width: 4.75rem;
				height: 4.75rem;
				border-radius: 15%;
			}

			p {
				margin-top: -0.25rem;
				font-size: 0.5rem
			}
		}
	}

	.shangpins {
		display: flex;
		flex-wrap: wrap;
		background-color: rgb(250, 250, 250);

		.shangpin {
			width: 47%;
			margin: 1.5%;
			background-color: white;
			border-radius: 5%;

			.shangpinimg {
				width: 100%;
				border-radius: 5%;
			}

			.shangpinmes {
				padding: 0.25rem 0.5rem;

				.shangpinp {
					//height: 1rem;
					font-size: 0.5rem;
					//overflow: hidden;
				}

				.shangjia {
					display: flex;

					.shangjiaimg {
						width: 1.2rem;
						height: 1.2rem;
						margin: 0.25rem;
						border-radius: 50%;
						vertical-align: middle;
					}

					.shangjianame {
						font-size: 0.75rem;
						line-height: 1.7rem;
						color: gray;
					}
				}
			}

		}
	}
</style>